<template>
  <div class="left clearfix container">
     <h3 v-if="tag_id"
        class="left-title">{{tag_name}} 相关的文章：</h3>
     <div class="clearfix">
        <ul class="articles-list"
        id="list">
      <transition-group name="el-fade-in">
        <li @click="articleDetail(article._id)"
            v-for="(article) of articlesList"
            :key="article._id"
            class="item">
          <!-- <a :href="href + article._id"
             target="_blank"> -->
            <img class="wrap-img img-blur-done"
                 :data-src="article.img"
                 data-has-lazy-src="false"
                 :src="article.contentUrl"
                 alt="文章封面" />
            <div class="content">
              <h4 class="title">{{article.title}}</h4>
              <p class="abstract">{{article.desc}}</p>
              <div class="meta">
                <span>查看 {{article.scanned}}</span>
                <span>评论 {{article.comments.length}}</span>
                <span>赞 {{article.likes}}</span>
                <span v-if="article.ctime"
                      class="time">
                      {{ article.ctime | formateDate("YMDHMS") }}
                  
                </span>
              </div>
            </div>
          <!-- </a> -->
        </li>
      </transition-group>
    </ul>
    </div>
      <Loading v-if="isLoading"/>
      <LoadEnd :msg="msg"  v-if="isLoadEnd"></LoadEnd>
    </div>
</template>

<script>
import Loading from '../components/loading.vue'
import LoadEnd from '../components/loadEnd.vue'
import { getUserList } from '../api/api'
import {
  throttle,
  getScrollTop,
  getDocumentHeight,
  getWindowHeight,
  getQueryStringByName,
  timestampToTime
} from "../plugins/utils";
import axios from 'axios'
export default {
  data () {
    return {
      articlesList:[],
      tag_id:'',
      tag_name:'',
      pageNum:1,
      pageSize:6,
      isLoadEnd:false,
      isLoading:false,
      msg:''
    }
  },
  components:{
     Loading,
     LoadEnd
  },
  mounted () {
      var that = this
      this.handleSearch();
   window.onscroll = () => {
      if (getScrollTop() + getWindowHeight() > getDocumentHeight() - 150) {
        // 如果不是已经没有数据了，都可以继续滚动加载
        if (this.isLoadEnd === false) {
          this.handleSearch();
        }
      }
    };
  },
 watch: {
    '$route' (to, from) { // 监听路由是否变化
    console.log(to)
      if (to.query.tag_id !== from.query.tag_id) {
         let id =  to.query.tag_id
         let tag_name = to.query.tag_name
         this.tag_id =id
         this.tag_name=tag_name
         axios.post('api/article',{kinds:to.query.tag_id})
              .then(data => {
                console.log(data)
                // this.articlesList = ''
                this.articlesList = data.data
                this.isLoading=false
              })
      }
     
    }
  },
  methods:{
    articleDetail(id){
       var userId = this.getCookie('userID');
       console.log(userId)
      if(userId){
            this.$router.push({name:"articleDetail", query:{"id":id}});
            return
      }
      else{
           this.$message({
              message: '请先登陆！！',
              type: 'error',
            });
      }
    },
    handleSearch(){
       this.isLoading = true;
        axios.post('/api/article',{pageNum:this.pageNum,pageSize:this.pageSize})
        .then(data => {
           if (data.data.length === 0 ) {
             this.msg='您还没有发表文章！'
                this.isLoadEnd = true;
                this.isLoading = false;
                document.removeEventListener("scroll", () => {});
                window.onscroll = null;
              }else{
                  console.log(data)
                  this.isLoading=false
                  this.articlesList = [...this.articlesList, ...data.data];
                  this.pageNum++;
              }
        })
    }
  // 
  }
}
</script>

<style lang='less' scoped>
@import url("../less/index.less");
.left {
  .articles-list {
    margin: 0;
    padding: 0;
    list-style: none;
    .title {
      color: #333;
      margin: 7px 0 4px;
      display: inherit;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.5;
    }
    .item > div {
      padding-right: 140px;
    }
    .item .wrap-img {
      position: absolute;
      top: 50%;
      margin-top: -50px;
      right: 0;
      width: 125px;
      height: 100px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        border: 1px solid #f0f0f0;
      }
    }
    li {
      line-height: 20px;
      position: relative;
      // width: 100%;
      padding: 15px 0px;
      padding-right: 150px;
      border-bottom: 1px solid #f0f0f0;
      word-wrap: break-word;
      cursor: pointer;
      &:hover {
        .title {
          color: #000;
        }
      }
      .abstract {
        min-height: 30px;
        margin: 0 0 8px;
        font-size: 13px;
        line-height: 24px;
        color: #555;
      }
      .meta {
        padding-right: 0 !important;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        a {
          margin-right: 10px;
          color: #b4b4b4;
          &::hover {
            transition: 0.1s ease-in;
            -webkit-transition: 0.1s ease-in;
            -moz-transition: 0.1s ease-in;
            -o-transition: 0.1s ease-in;
            -ms-transition: 0.1s ease-in;
          }
        }
        span {
          margin-right: 10px;
          color: #666;
        }
      }
    }
  }
}
</style>